<template>
  <div>
    <puplic-modal
      width="1200px"
      :footer="false"
      :title="title"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="handleOk"
    >
      <div slot="content" class="content-wrap">
        <span class="title">餐厅基本信息</span>

        <table>
          <tr>
            <td colspan="1" class="label">餐厅名称</td>
            <td colspan="2" class="value double-width">{{ records.restaurantName }}</td>
            <td colspan="1" class="label">餐厅类型</td>
            <td colspan="1" class="value">{{ records.restaurantType_dictText }}</td>
          </tr>
          <tr>
            <td colspan="1" class="label">餐厅规模</td>
            <td colspan="2" class="value double-width">
              {{ getDictByType(restaurant_scale, records.restaurantScale) }}
            </td>
            <td colspan="1" class="label">清洗周期</td>
            <td colspan="1" class="value">{{ records.restaurantCleanCycle }}</td>
          </tr>
          <tr>
            <td colspan="1" class="label">餐厅负责人</td>
            <td colspan="2" class="value double-width">{{ records.restaurantChargeName }}</td>
            <td colspan="1" class="label">负责人联系方式</td>
            <td colspan="1" class="value">{{ records.restaurantChargePhone }}</td>
          </tr>
          <tr>
            <td colspan="1" class="label">营业地址</td>
            <td colspan="4" class="value">{{ records.restaurantAddress }}</td>
          </tr>
        </table>

        <div class="title" style="margin-top: 16px">巡查记录</div>

        <table>
          <tr>
            <td colspan="1" class="label">巡查队员</td>
            <td colspan="2" class="value">
              {{ records.personName }}
              {{ records.personNameList ? '、' + records.personNameList.join('、') : '' }}
            </td>
            <td colspan="1" rowspan="5" class="label">现场图片</td>
            <td colspan="1" rowspan="5" class="value" style="padding: 0">
              <img
                class="sceneImage"
                :id="records.sceneImage"
                @click="werImg(records.sceneImage)"
                :src="imgPrefix + records.sceneImage"
                :data-original="imgPrefix + records.sceneImage"
              />
            </td>
          </tr>
          <tr>
            <!-- td单元格  tr 一行 table表格 colspan横向合并单元格  rowspan纵向合并单元格-->
            <td colspan="1" class="label">巡查时间</td>
            <td colspan="2" class="value">{{ records.createTime }}</td>
          </tr>
          <tr>
            <td colspan="1" class="label">检查结果</td>
            <td colspan="2" class="value">{{ records.status ? (records.status == 1 ? '合格' : '不合格') : '暂无' }}</td>
          </tr>
          <tr>
            <td colspan="1" rowspan="2" class="label">餐厅负责人签名</td>
            <td colspan="2" rowspan="2" class="value">
              <img :src="imgPrefix + records.signatureImage" class="signatureImage" />
            </td>
          </tr>
          <tr></tr>

          <tr v-if="records.status !== 1">
            <td colspan="1" rowspan="2" class="label">违规现象文字描述</td>
            <td colspan="4" rowspan="2" class="value">
              {{ records.violationContent }}
            </td>
          </tr>
          <tr v-if="records.status !== 1"></tr>

          <tr v-if="records.status !== 1">
            <td colspan="1" rowspan="3" class="label">违规现象图片证据</td>
            <td colspan="4" rowspan="3" class="value">
              <span v-if="picList.length == 0">暂无图片</span>

              <div v-else class="illegalityPicWrap flex">
                <img
                  :key="index"
                  :id="item.path"
                  class="illegalityPic"
                  @click="werImg(item.path)"
                  :src="imgPrefix + item.path"
                  v-for="(item, index) in picList"
                  :data-original="imgPrefix + item.path"
                />
              </div>
            </td>
          </tr>
          <tr v-if="records.status !== 1"></tr>
          <tr v-if="records.status !== 1"></tr>
        </table>
      </div>
      <div slot="footer"></div>
    </puplic-modal>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { comMethods } from '@/mixins/comMethods'
import puplicModal from '@/components/publicModal'
import { ajaxGetDictItems } from '@/api/api'
import { getAction } from '@/api/manage'
export default {
  mixins: [comMethods],
  components: { puplicModal },
  data() {
    return {
      publicVisible: false,
      records: {},
      title: '巡查详情',
      restaurant_scale: [],
      picList: [],
    }
  },

  methods: {
    show(records) {
      this.publicVisible = true
      this.records = records
      this.statusDict()

      if (records.status != 1) {
        this.getPicList(records.id)
      }
    },

    async statusDict() {
      let { result: restaurant_scale } = await ajaxGetDictItems({ code: 'restaurant_scale' })
      this.restaurant_scale = restaurant_scale
    },

    getDictByType(arr, value) {
      const foundObject = arr.find((obj) => obj.value == value)
      return foundObject ? foundObject.text : '暂无'
    },

    async getPicList(bizId) {
      let { result } = await getAction('/sys/images_path/list', { bizId, bizType: 6 })
      this.picList = result
    },

    werImg(id) {
      console.log(id, 'id')
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show() // 点击图片放大注销此方法
    },

    handleOk() {
      this.publicVisible = false
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 0 0;
}
.content-wrap {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  overflow: auto;
  background: #014c4e;
  padding: 40px 50px;

  .title {
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #00f8ff;
    padding-left: 10px;
  }

  table {
    width: 100%;
    border: 1px solid #05767a; /* 设置表格整体边框样式 */
    font-family: PingFang SC-Regular, PingFang SC;
    font-size: 14px;
    font-weight: 400;
    margin-top: 16px;
    tr {
      height: 46px;
    }
    .label {
      width: 160px;
      text-align: center;
      background: #036f73;
      border: 1px solid #05767a;

      color: #02c1c7;
    }

    .value {
      width: 210px;
      text-align: left;
      padding-left: 16px;
      background: rgba(1, 101, 104, 0.8118);
      border: 1px solid #05767a;

      color: #00f8ff;

      .sceneImage {
        width: 210px;
        height: 230px;
        object-fit: cover;
        cursor: pointer;
      }

      .signatureImage {
        width: 173px;
        height: 84px;
        // object-fit: cover;
        background-color: #fff;
      }

      .illegalityPicWrap {
        max-height: 144px;
        max-width: 900px;
        overflow-x: scroll;
      }

      .illegalityPic {
        width: 174px;
        min-width: 174px;
        height: 130px;
        margin-right: 20px;
        object-fit: cover;
        cursor: pointer;
      }
    }
  }
}
</style>
